<template>
	<view class="wrapper">
		<uni-nav-bar title="我的同事" backgroundColor="#f3f3f3" leftIcon="back" @clickLeft="$back()" rightIcon="plusempty" @clickRight="changeAlert"></uni-nav-bar>
		<!-- 右上角加号弹出层 -->
		<dl-layer v-if="showAlert||companyAlert||departmentAlert" :top='top' @closeAlert='closeAlert'>
			<!-- 右上角弹出层 -->
			<view slot='main' v-if="showAlert">
				<view class="center" @tap="$open('./createCompany')">
					<view class="f30">创建公司</view>
				</view>
			</view>
			<!-- 公司弹出层 -->
			<view slot='main' v-if="companyAlert">
				<view class="center" @tap="$open('./createDepartment?Companyid='+Companyid+'&parentid='+parentid)">
					<view class="f30">添加部门</view>
				</view>
				<view class="center" @tap="$open('./changeCompany?Companyid='+Companyid)">
					<view class="f30">修改公司名称</view>
				</view>
				<view class="center" @tap="exit('退出公司','确定退出该公司？')">
					<view class="f30">退出公司</view>
				</view>
				<view class="center" @tap="exit('删除公司','确定删除该公司？')">
					<view class="f30">删除公司</view>
				</view>
			</view>
			<!-- 部门弹出层 -->
			<view slot='main' v-if="departmentAlert">
				<view class="center" @tap="$open('../friend/choiceFriend')">
					<view class="f30">添加成员</view>
				</view>
				<view class="center" @tap="$open('./changeDepartment?departmentid='+departmentId)">
					<view class="f30">修改部门名称</view>
				</view>
				<view class="center" @tap="exit('删除部门','确定删除该部门？')">
					<view class="f30">删除部门</view>
				</view>
			</view>
		</dl-layer>
		<!-- 退出警告层 -->
		<alert :alertTitle="alertTitle" :alertText="alertText" @alertConfirm='alertConfirm' v-if="showExit"></alert>
		<view class="main">
			<view class="company_box" v-for="(val,index) in userList" :key='val.id'>
				<!-- 公司栏 -->
				<view class="tab center" @tap="showBumen(index)">
					<image src="../../static/colleague/right.png" mode="aspectFill" class="arr" v-show="!val.showBumen"></image>
					<image src="../../static/colleague/down.png" mode="aspectFill" class="arr" v-show="val.showBumen"></image>
					<view class="f30 title">{{val.companyName}}</view>
					<view class="flex f26 cred">
					<!-- {{val.noticeContent==''?'暂无公告':val.noticeContent}} -->
					</view>
					<image src="../../static/colleague/add.png" mode="aspectFill" class="add" :data-id="val.id" :data-parentId='val.rootDpartId[0]' @tap.stop="changeCompany"></image>
				</view>
				<block v-for="(item,i) in val.departments" :key='item.id' v-if="i!=0&&val.showBumen">
					<!-- 部门栏 -->
					<view class="tab center department" @tap="showYuan(index,i)">
						<image src="../../static/colleague/right.png" mode="aspectFill" class="arr" v-show="!item.showYuan"></image>
						<image src="../../static/colleague/down.png" mode="aspectFill" class="arr" v-show="item.showYuan"></image>
						<view class="f30 title c666 flex">{{item.departName}}</view>
						<image src="../../static/colleague/add.png" mode="aspectFill" class="add" :data-id="val.id" :data-departmentId='item.id' @tap.stop="changedepartment"></image>
					</view>
					<view class="user_box center" v-for="(user,uindex) in item.employees" :key='user.userId' v-show="item.showYuan">
						<dimg :src="user.userId | avatar" class="avarat"></dimg>
						<view class="user_info flex center colum">
							<view class="f28">
								{{user.nickname}}
							</view>
							<view class="f22 cred">
								{{user.position}}
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import dlLayer from '../../components/dl-layer/dl-layer.vue'
import alert from '../../components/alert/alert.vue'
export default {
	data() {
		return {
			showAlert: false,
			top: 0,
			companyAlert:false,
			departmentAlert:false,
			alertTitle:'',
			alertText:'',
			showExit:false,
			userList:[],
			Companyid:'',
			parentid:'',
			departmentId:''
		};
	},
	components:{dlLayer,alert},
	onShow() {
		const userList=getApp().globalData.contactList
		// 添加部门成员
		if(userList.length>0){
			let	userId=[]
			userList.map(item => {
				userId.push(item.toUserId)
			})
			this.employeeAdd(userId)
		}else{
			this.companyGetByUserId()
		}
	},
	methods: { 
		// 切换员工显示
		showYuan(index,i){
			this.userList[index].departments[i].showYuan=!this.userList[index].departments[i].showYuan
			this.$set(this.userList[index].departments,i,this.userList[index].departments[i])
		},
		// 切换部门显示
		showBumen(index){
			this.userList[index].showBumen=!this.userList[index].showBumen
		},
		exit(alertTitle,alertText){
			this.alertTitle=alertTitle
			this.alertText=alertText
			this.showExit=!this.showExit
		},
		// 警告弹出层回调
		alertConfirm(type){
			this.showExit=!this.showExit
			// 点击确定
			if(type==1){
				if(this.alertTitle=='删除公司'){
					this.companyDelete()
				}else if(this.alertTitle=='退出公司'){
					this.companyQuit()
				}else if(this.alertTitle=='删除部门'){
					this.departmentDelete()
				}
			}
		},
		// 部门弹出层
		changedepartment(e) {
			this.top=parseInt(e.currentTarget.offsetTop)+20+'px'
			this.Companyid=e.currentTarget.dataset.id
			this.departmentId=e.currentTarget.dataset.departmentid
			this.departmentAlert = !this.departmentAlert;
		},
		// 公司弹出层
		changeCompany(e) {
			this.top=parseInt(e.currentTarget.offsetTop)+20+'px'
			this.Companyid=e.currentTarget.dataset.id
			this.parentid=e.currentTarget.dataset.parentid
			this.companyAlert = !this.companyAlert;
		},
		// 右上角弹出层
		changeAlert(e) {
			this.top=e||'88rpx'
			this.showAlert = !this.showAlert;
		},
		// 关闭所有蒙层
		closeAlert(){
			this.departmentAlert=this.showAlert=this.companyAlert=false
		},
		// 添加部门成员
		employeeAdd(userId){
			this.$ajax(this.apiList.employeeAdd,{
				companyId:this.Companyid,
				departmentId:this.departmentId,
				userId:userId.join(',')
			}).then(res => {
				getApp().globalData.contactList=[]
				this.$sToast('添加成功')
				this.companyGetByUserId()
			});
		},
		// 删除部门
		departmentDelete(){
			this.$ajax(this.apiList.departmentDelete,{
				userId:uni.getStorageSync('userinfo').userId,
				departmentId:this.departmentId
			}).then(res => {
				this.$sToast('删除成功')
				this.companyGetByUserId()
			});
		},
		// 退出公司
		companyQuit(){
			this.$ajax(this.apiList.companyQuit,{
				userId:uni.getStorageSync('userinfo').userId,
				companyId:this.Companyid
			}).then(res => {
				this.$sToast('退出成功')
				this.companyGetByUserId()
			});
		},
		// 删除公司
		companyDelete(){
			this.$ajax(this.apiList.companyDelete,{
				userId:uni.getStorageSync('userinfo').userId,
				companyId:this.Companyid
			}).then(res => {
				this.$sToast('删除成功')
				this.companyGetByUserId()
			});
		},
		// 我的同事列表
		companyGetByUserId(){
			this.$ajax(this.apiList.companyGetByUserId,{
				userId:uni.getStorageSync('userinfo').userId
			}).then(res => {
				res.data=res.data || []
				res.data.forEach(item => {
					return item.showBumen=true
					item.departments.forEach(i => {
						return i.showYuan=false
					})
				})
				this.userList=res.data
			});
		}
	}
};
</script>

<style lang="scss">
.user_box{
	.user_info{
		height: 144rpx;
		border-bottom: 1rpx solid #E0E0E0;
		align-items: flex-start;
		.cred{
			margin-top: 10rpx;
		}
	}
	.avarat{
		width:94rpx;
		height:94rpx;
		border-radius:50%;
		margin:0 20rpx 0 50rpx;
		overflow: hidden;
	}
}
.cred {
		color: rgba(255, 53, 67, 1);
	}
.tab {
	height: 105rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #f3f3f3;
	
	.title {
		margin: 0 20rpx 0 -10rpx;
	}
	image {
		width: 38rpx;
		height: 41rpx;
		margin: 0 30rpx;
	}
	.arr {
		width: 30rpx;
		height: 30rpx;
	}
}
.department .arr {
	margin: 0 30rpx 0 60rpx;
}
.alert_list {
	background: #ffffff;
	width: 345rpx;
	border-radius: 12rpx;
	.center {
		padding: 28rpx 45rpx;
		justify-content: flex-start;
	}
	image {
		width: 40rpx;
		height: 39rpx;
		margin-right: 33rpx;
	}
}
page {
	background: #f3f3f3;
}
</style>
